<template>
  <!-- Top Menu Items -->
  <header class="header">
    <nav class="navbar fixed-top">
      <div class="navbar-header d-flex align-items-center align-middle justify-content-between">
        <router-link :to="homePage" class="navbar-brand">
          <div class="brand-image brand-big" v-show="!isActive">
            <img src="~assets/img/logo-big.png" alt="logo" class="logo-big">
          </div>
          <div class="brand-image brand-big" v-show="isActive">
            <img src="~assets/img/logo-small.png" alt="logo" class="logo-small">
          </div>
        </router-link>
        <a id="toggle-btn" class="menu-btn" @click="isCollapse" :class="{'active' : isActive}">
          <span></span>
          <span></span>
          <span></span>
        </a>
      </div>

      <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center pull-right">
        <li class="nav-item d-flex align-items-center">
          <!-- <el-badge :is-dot="true" class="item">
            <div>
              <i class="iconfont">&#xe6d6;</i>
            </div>
          </el-badge> -->
        </li>
        <li class="nav-item d-flex align-items-center">
          <el-popover placement="bottom-end" trigger="click" width="250px">
            <ul>
              <li class="welcome">
                <el-image :src="memberVo.cover" class="rounded-circle">
                  <div slot="error" class="image-slot">
                    <img src="~assets/img/cover.jpg" alt="avatar" class="rounded-circle">
                  </div>
                </el-image>
              </li>
              <li class="item" @click="dialogUpdateFormVisiable = true">
                <p>修改密码</p>
              </li>
              <li>
                <div class="logout text-center" @click="logout">
                  <i class="iconfont">&#xe659;</i>
                </div>
              </li>
            </ul>

            <el-image :src="memberVo.cover" class="avatar rounded-circle" slot="reference">
              <div slot="error" class="image-slot">
                <img src="~assets/img/cover.jpg" alt="avatar" class="avatar rounded-circle">
              </div>
            </el-image>
          </el-popover>
        </li>
      </ul>
    </nav>
    <el-dialog title="修改密码" :visible.sync="dialogUpdateFormVisiable" width="40%">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="新密码" prop="newLoginPwd">
          <el-input
            type="password"
            show-password
            clearable
            v-model="form.newLoginPwd"
            autocomplete="off"
            placeholder="新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPwd">
          <el-input
            type="password"
            show-password
            clearable
            v-model="form.confirmPwd"
            autocomplete="off"
            placeholder="确认密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </div>
    </el-dialog>
  </header>
  <!-- /Top Menu Items -->
</template>
<script>
import { mapMutations, mapState } from "vuex";

import { updatePwd } from "api/MemberApi";

export default {
  name: "Top",
  props: {
    memberVo: Object
  },
  data() {
    var validateConfirmPwd = (rule, value, callback) => {
      console.info(value == this.form.newLoginPwd);
      if (value != this.form.newLoginPwd) {
        callback(new Error("密码输入不一致，请检查"));
      } else callback();
    };
    return {
      isActive: false,
      dialogUpdateFormVisiable: false,
      form: {
        newLoginPwd: "",
        confirmPwd: ""
      },
      rules: {
        newLoginPwd: [{ required: true, message: "请输入新密码" }],
        confirmPwd: [
          { required: true, message: "请输入新密码" },
          { validator: validateConfirmPwd }
        ]
      }
    };
  },
  computed: {
    ...mapState(['homePage'])
  },
  methods: {
    isCollapse() {
      this.isActive = !this.isActive;
      this.$emit("sendCollapse", this.isActive);
    },
    logout() {
      this.$base.showOk();
      setTimeout(() => {
        this.$router.push("/");
        this.clear();
      }, 500);
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          updatePwd(this.form).then(res => {
            if (res) {
              this.$base.showOk("密码修改成功");
              this.dialogUpdateFormVisiable = false;
            }
          });
        }
      });
    },
    ...mapMutations(["clear"])
  },
  watch: {
    dialogUpdateFormVisiable(newDialogUpdateFormVisiable) {
      if (!newDialogUpdateFormVisiable) {
        this.$base.clearObj(this.form);
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~assets/css/style.styl';

.header {
  height: $top-height;
  position: relative;

  .navbar {
    background: #fff;
    padding: 0 15px;
    color: $topFontColor;
    border-radius: 0;
    box-shadow: 0 1px 0 #eee;
    z-index: 1000;
    width: 100%;

    .brand-image {
    }

    img.logo-big {
      width: 170px;
    }

    img.logo-small {
      width: 70px;
      height 64px
    }

    .nav-menu {
      margin: 0;
    }

    .menu-btn {
      margin-right: 0;
      font-size: 1.2em;
      vertical-align: middle;
      padding: 0;
      cursor: pointer;

      span {
        background: $topFontColor;
        width: 20px;
        height: 2px;
        display: block;
        margin: 7px 0;
        border-radius: 35px;
        transition: all 0.3s cubic-bezier(0.81, -0.33, 0.345, 1.375);
      }

      span:first-of-type {
        margin-top: 0;
        transition: all 0.6s;
      }

      span:nth-of-type(2) {
        position: relative;
        width: 30px;
      }

      span:last-of-type {
        position: relative;
        width: 15px;
        margin-top: 0;
      }
    }

    .menu-btn.active {
      span:nth-of-type(2) {
        position: relative;
        width: 30px;
      }

      span:first-of-type {
        transform: translateX(10px);
        margin-top: 0;
      }

      span:last-of-type {
        transform: translateX(15px);
        margin-top: 0;
        width: 15px;
      }
    }

    .nav-item {
      margin-right: 20px;
      & >>> .el-image__inner {
        border-radius 50%
      }

      div {
        color: #424242;
      }

      &:last-of-type {
        margin-right: 0;
      }

      .avatar {
        width: 'calc(%s - 20px)' % $top-height;
        height: 'calc(%s - 20px)' % $top-height;
        margin: 0 auto;
        border: 0.2rem solid #fff;
        cursor: pointer;
      }
    }
  }
}

.welcome {
  width: 120px;
  margin: 0 auto;
  padding: 15px;
  position: relative;
  text-align: center;

  img {
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
  }

  & >>> .el-image__inner {
    border-radius 50%
  }
}

.item {
  cursor: pointer;
  padding: 0.5rem;
  border-bottom: 0 none;
  position: relative;

  p {
    color: $colorPrimary;
    margin-bottom: 0;
  }

  &:hover, &:active {
    background: #fafafa;
  }
}

.logout {
  background: $colorPrimary;
  width: 60px;
  height: 60px;
  color: #FFF;
  border-radius: 50%;
  text-align: center !important;
  padding: 0;
  line-height: 40px;
  position: relative;
  bottom: -40px;
  font-size: 1.8rem;
  margin: 10px auto 0;
  cursor: pointer;
}
</style>


